Controlling the size and alignment of our images using CSS keeps rules that affect the presentation of our page in the CSS and out of the HTML markup.
We can control the size of an image using the width and height properties in CSS.
Specifying image sizes helps pages to load more smoothly because the HTML and CSS code will often load before the images, and telling the browser how much space to leave for an image allows it to render the rest of the page without waiting for the image to download.
Basic Images Control: You can control images through in-line styling, or using id and class through external CSS file.
Size of images syntax:
img { width: 100px; hight: auto; } Aligning images syntax:
img { display: block; float: right; margin-left: 150px; margin-right: 200px; width: 40%; } Centering images syntax:
img { display: block; margin-left: auto; margin-right: auto; }
using
controls :attribute adds video controls, like play, pause, and volume Images can be aligned both horizontally and vertically using CSS.
You can use a background image behind the box created by any element on a page.
Background images can appear just once or be repeated across the background of the box.
You can create image rollover effects by moving the background position of an image.
Value Description url(‘URL’) The URL to the image. To specify more than one image, separate the URLs with a comma none No background image will be displayed. This is default linear-gradient() Sets a linear gradient as the background image. Define at least two colors (top to bottom) radial-gradient() Sets a radial gradient as the background image. Define at least two colors (center to edges) repeating-linear-gradient() Repeats a linear gradient repeating-radial-gradient() Repeats a radial gradient initial Sets this property to its default value. Read about initial inherit Inherits this property from its parent element. Read about inherit To reduce the number of images your browser has to load, you can create image sprites.
using
controls :attribute adds video controls, like play, pause, and volume width and height attributes can be included
Search Engine Optimization (SEO) SEO is a huge topic and several books have been written on the subject.
The Basics
Search engine optimization (or SEO) is the practice of trying to help our site appear nearer the top of search engine results when people look for the topics that our website covers.
On-Page Techniques
On-page techniques are the methods we can use on our web pages to improve their rating in search engines.
Off-Page Techniques
Getting other sites to link to us is just as important as on-page techniques. Search engines help determine how to rank our site by looking at the number of other sites that link to ours.
In every page of our website there are seven key places where keywords (the words people might search on to find our site) can appear in order to improve its findability.